<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <head th:include="views/public"/>
</head>
<body class="layui-view-body">
    <div id="vm" class="layui-content">
        <div style="margin-left: 1%;padding-top: 1%">
            <el-form :model="form" ref="form1" :inline="true" label-width="68px">
                <el-form-item label="菜单名称" prop="name">
                    <el-input   placeholder="请输入菜单名称" v-model="form.name"  clearable size="small" style="width: 160px;" @keyup.enter.native="search"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status"  placeholder="菜单状态" class="search-input"  @change="statusChange" clearable size="small" >
                        <el-option v-for="dict in statusOptions" :key="dict.dictLabel" :label="dict.dictValue" :value="dict.dictLabel"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset('form1')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <template>
            <div>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId"  default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="name" label="菜单名称"  width="180"></el-table-column>
                    <el-table-column prop="url" label="路径"  width="180"></el-table-column>
                    <el-table-column prop="perms" label="权限标识"></el-table-column>
                    <el-table-column prop="icon" label="图标">
                        <template slot-scope="scope">
                            <i :class="scope.row.icon" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column prop="sort" label="排序" sortable></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.type!='按钮'" @click="add(scope.row)">添加</el-button>
                            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>

        <!--修改-->
        <el-dialog :title="title" width="36%"  :visible.sync="dialogFormVisible">
            <el-form :model="respForm"  ref="respForm" :rules="rules" :label-width="formLabelWidth">
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="菜单名" prop="name">
                            <el-input v-model="respForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item v-if="respForm.parentId != 0 " label="上级菜单" prop="parentId">
                            <treeselect v-model="respForm.parentId" :normalizer="normalizer"  placeholder="请选择所属部门" :options="tableData" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="类型" prop="type">
                            <el-radio-group v-model="respForm.type" size="medium">
                                <el-radio v-for="dict in menuOptions" v-model="respForm.type" :label="dict.dictLabel">{{dict.dictValue}}</el-radio>
                                <!-- <el-radio  :label="1">禁用</el-radio>-->
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="respForm.type=='A'" label="权限标识" prop="perms">
                            <el-input v-model="respForm.perms" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路径" v-if="respForm.type=='C'" prop="url">
                            <el-input v-model="respForm.url" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单图标" v-if="respForm.type!='A'" prop="icon">
                            <el-input v-model="respForm.icon" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="respForm.sort" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="respForm.status" size="medium">
                                <el-radio v-for="(dict,index) in statusOptions" :key="dict.dictLabel" :label="dict.dictLabel">{{dict.dictValue}}</el-radio>
                                <!-- <el-radio  :label="1">禁用</el-radio>-->
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="respForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('respForm')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
    <script th:src="@{/assets/js/sys/menu.js}"></script>
</body>
</html>